/** * @description: 五困生-辅导员维度 */
<template>
  <div class="pub-container">
    <!-- 五困生占比 -->
    <PieEchart2
      v-if="isApiComp"
      pieShowId="percentFiveHard"
      :optionData="percentFiveHardData"
      :colorList="percentColorList"
      pieTitleText="学校总人数"
      titleText="五困生占比"
    />

    <!-- 困难生类型比例 -->
    <PieEchart
      v-if="isApiComp"
      pieShowId="typeFiveHard"
      :optionData="typeFiveHardData"
      :colorList="typeColorList"
      :lengendPlace="typeLengendPlace"
      pieTitleText="总人次"
      titleText="困难生类型比例"
    />

    <!-- 五困生年级占比 -->
    <PieEchart
      v-if="isApiComp"
      pieShowId="collegeFiveHard"
      :optionData="gradeFiveHardData"
      :colorList="gradeColorList"
      :lengendPlace="gradeLengendPlace"
      pieTitleText="总人次"
      titleText="五困生年级占比"
    />

    <!-- 辅导员统计 -->
    <div class="floor floor-instructor">
      <p class="title">五困生数据</p>
      <Search class="search" placeholderText="辅导员编号/姓名" />
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh" :disabled="finished">
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了..." @load="onLoad">
          <Instructor :instructorList="instructorList" />
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
import SchoolDmCount from './components/schoolDmCount' //各维度统计
import PieEchart from '@/components/pieEchart'
import PieEchart2 from '@/components/pieEchart2'
import Search from '@/components/Search'
import Instructor from '@/components/instructor'
import { difficultStuCollege, difficultStuFdy } from '@/api/fiveHard'

export default {
  name: 'FiveHard',
  components: {
    SchoolDmCount,
    PieEchart,
    PieEchart2,
    Search,
    Instructor,
  },
  data() {
    return {
      allFiveHardObj: {},

      //五困生占比
      percentColorList: ['#2181FB', '#2CCDA8'],
      percentFiveHardData: [
        {
          name: '非困难学生',
          value: 0,
        },
        {
          name: '五困生',
          value: 0,
        },
      ],

      // 困难生类型比例
      typeColorList: ['#FF7357', '#FFE032', '#24E3FF', '#21A6FB', '#2E6CF6'],
      typeFiveHardData: [],
      typeLengendPlace: { top: '18%', left: '68%' },

      //五困生年级占比
      gradeColorList: ['#2E6CF6', '#21A6FB', '#24E3FF', '#FFE032', '#FFA132', '#FF7357', '#BA4DF9', '#734DF9', '#07c160', '#ff976a'],
      gradeLengendPlace: { top: '10%', left: '68%' },
      gradeFiveHardData: [],

      isApiComp: false,
      instructorList: [], //辅导员数据

      //筛选条件
      params: {
        collegeId: '',
        startDate: undefined,
        endDate: undefined,
        sign: undefined,
      },

      fdyParams: {
        //辅导员搜索条件
        collegeId: undefined,
        pageNum: 1,
        pageSize: 10,
      },
      loading: true,
      finished: false,
      refreshing: false,
    }
  },
  created() {
    this.params.collegeId = this.$route.query.subId
    this.fdyParams.collegeId = this.$route.query.subId
    this.getDifficultStuCollege()
    this.getDifficultStuFdy() //学院辅导员

    //筛选触发
    this.$bus.on('fiveHardDbs', (startDate, endDate, sign) => {
      this.params.startDate = startDate
      this.params.endDate = endDate
      this.params.sign = sign
      this.allFiveHardObj = {}
      this.typeFiveHardData = []
      this.gradeFiveHardData = []

      this.getDifficultStuCollege()
    })
  },
  methods: {
    // 获取全校五困生数据-学院
    async getDifficultStuCollege() {
      try {
        const { data } = await difficultStuCollege({ ...this.params })
        this.allFiveHardObj = data.data

        //五困生占比
        this.percentFiveHardData[0].value = data.data.unDifficultStuNums || 0
        this.percentFiveHardData[1].value = data.data.difficultStuNums || 0

        //困难生类型比例
        let typeFiveHardData = [
          { name: '经济', value: this.allFiveHardObj.economicDifficultStuNums || 0 },
          { name: '学业', value: this.allFiveHardObj.academicDifficultStuNums || 0 },
          { name: '心理', value: this.allFiveHardObj.mentalDifficultStuNums || 0 },
          { name: '行为', value: this.allFiveHardObj.behavioralDifficultStuNums || 0 },
          { name: '思想', value: this.allFiveHardObj.thoughtDifficultStuNums || 0 },
        ]
        this.typeFiveHardData = typeFiveHardData

        //五困生年级占比
        let gradeFiveHardData = []
        this.allFiveHardObj.difficultStudentSubList.forEach(item => {
          gradeFiveHardData.push({
            name: item.subName || '--',
            value: item.difficultStuNums || 0,
          })
        })
        this.gradeFiveHardData = gradeFiveHardData
        this.isApiComp = true
      } catch (e) {
        console.log(e)
      }
    },

    //学院辅导员
    async getDifficultStuFdy(isRefresh) {
      try {
        const { data } = await difficultStuFdy({ ...this.fdyParams })

        if (isRefresh) {
          this.instructorList = [...data.data.list, ...this.instructorList]
          this.refreshing = false
        } else {
          this.instructorList = [...this.instructorList, ...data.data.list]
          this.loading = false
        }
        this.total = data.data.total
        if (this.instructorList.length === this.total) {
          this.finished = true
        }
      } catch (e) {
        console.log(e)
      }
    },

    // 上拉加载处理函数
    onLoad() {
      this.fdyParams.pageNum++
      this.getDifficultStuFdy()
    },

    // 下拉刷新处理函数
    onRefresh() {
      this.fdyParams.pageNum = 1
      this.getDifficultStuFdy(true)
    },

    //维度点击跳转
    dimensionSkipDetail(item, str) {
      if (str === 'grade') {
        this.$router.push({ path: '/gradeMsg', query: { subId: item.subId, tc: item.subName } })
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.floor {
  background: $bg-white;
  padding: 20px 12px;
  border-radius: 10px;
  margin-top: 12px;
  padding-bottom: 0;
  .title {
    font-size: $fz16;
    color: $color-title;
    font-weight: normal;
  }
}

.floor-instructor {
  margin-top: 15px;
  .search {
    margin: 10px 0;
    border-bottom: 1px solid #e7eaf0;
  }
}
::v-deep {
  .van-search__content {
    background: #f5f5f5;
  }
}
</style>
